<template>
	<div>
		<slot name="banner" :amount="totalAmount"></slot>
		<div class="record-list">
			<template
				v-for="item in activityStore.status.lockBonus.list.filter((i: any) => !i.isExpiredAt)"
				:key="item.bonusId">
				<div class="record-list-card cursor-pointer" @click="goRecordDetails(item)">
					<div class="flex-cross-center item-row-tag">
						<span class="item-tag">{{ $t('record.tagBonus') }}</span>
						<base-icon
							name="hint"
							@click.stop="onClickHint(item)"
							class="text-[14px] align-middle" />
					</div>
					<div class="item-row">
						<span class="item-name">{{ $t(ActivityRewardType[item.type].name) }}</span>
						<div class="item-time" v-if="item.expiredAt - Date.now() > 0">
							<rewards-countdown
								v-if="!item.isExpiredAt"
								:time="item.expiredAt - Date.now()"
								@finish="activityStore.getProgressiveData()" />
						</div>
					</div>
					<div class="item-line" />
					<div class="item-row">
						<span class="item-row-label">{{ $t('rewards.unlockable') }}:</span>
						<span class="item-row-value">
							<up-amount :value="Decimals.sub(item.totalAmount, item.unlockedAmount)" />
						</span>
					</div>
					<div class="item-row">
						<span class="item-row-label">{{ $t('rewards.claimed') }}:</span>
						<span class="item-row-value">
							<up-amount :value="item.receivedAmount" />
						</span>
					</div>
				</div>
			</template>
		</div>
	</div>
</template>

<script setup lang="ts">
import { computed, watch } from 'vue'
import { useAccountStore, useActivityStore } from '@/store'
import { Decimals } from '@/utils/decimal'
import RewardsCountdown from '../../rewards-countdown/index.vue'
import { ActivityRewardType } from '@/enums/activity-reward-type.ts'
import { BaseIcon } from '@/components/base'
import { UpAmount } from '@/components/up'
import { goDetails } from '@/utils'

const activityStore = useActivityStore()
const accountStore = useAccountStore()

const totalAmount = computed(() => {
	return activityStore.status.lockBonus.list.reduce((acc: any, item: any) => {
		if (item.isExpiredAt) return acc
		return Decimals.add(acc, Decimals.sub(item.totalAmount, item.unlockedAmount))
	}, 0)
})
const goRecordDetails = (item: any) => {
	// 只有正在进行中的奖金 才可点击查看解锁流水记录; 多个再充奖金也只允许有一个正在解锁的奖金
	if (!item.expiredAt) return

	activityStore.setRecordParams({ filterTime: [], type: [item.type] })
	activityStore.setDetailCardType('lockBonus')
	activityStore.setRewardType('lockBonus')
	activityStore.setRewardDetailPopupShow(true)
}

const onClickHint = (item: any) => {
	activityStore.setRewardPopupShow(false)
	goDetails(ActivityRewardType[item.type].tncLink)
}

watch(
	() => accountStore.isLogin,
	(newValue) => {
		newValue && activityStore.getProgressiveData()
	},
	{
		immediate: true
	}
)

// onMounted(() => {
// 	activityStore.getProgressiveData()
// })
</script>

<style lang="scss" scoped>
.record-list {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding-top: 10px;
	.record-list-card {
		padding: 10px;
		border-radius: 6px;
		font-size: 12px;
		background: var(--color-bg-5);
		color: var(--color-text-2);
		.item-row-tag {
			margin-bottom: 3px;
		}
		.item-tag {
			margin-right: 3px;
			padding: 3px 4px;
			border-radius: 3px;
			font-size: 10px;
			background: var(--color-success);
			color: var(--color-white);
			//@include font-normal();
		}
		.item-name {
			font-size: 12px;
			color: var(--color-text-1);
		}
		.item-time {
		}
		.item-line {
			height: 1px;
			margin: 4px -10px;
			background: var(--color-border-1);
		}
		.item-row {
			display: flex;
			justify-content: space-between;
			align-items: center;
			min-height: 16px;
			.item-row-label {
			}
			.item-row-value {
			}
		}
	}
}
</style>
